<template>
	<!-- 规则管理页面 -->
	<div class="rulePage">
		<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
			<el-menu-item index="1">规则</el-menu-item>
			<el-menu-item index="2">模板</el-menu-item>
		</el-menu>
		<!-- 规则板块 -->
		<div class="content rules-card" v-if="activeIndex == 1">
			<div class="con-top">
				<el-radio-group v-model="radio">
					<el-radio :label="1">任务规则</el-radio>
					<el-radio :label="2">行为规则</el-radio>
					<el-radio :label="3">元规则</el-radio>
				</el-radio-group>
				<el-input class="search-input" placeholder="请输入" v-model="input" clearable>
				</el-input>
				<el-button class="search" type="primary" icon="el-icon-search"
					@click="onSubmit(input, radio.toString())">查询</el-button>

			</div>
			<div class="table">
				<el-table v-if="radio == 1" height="75vh" :data="tableData" style="width: 100%" key="table1"
					:header-cell-style="tableHeaderCellStyle">
					<el-table-column type="expand">
						<!--  -->
						<template slot-scope="props">
							<div class="rules">
								<p class="rules-s" @click="handleDetail3(props.row)">行为规则1
									<span class="rules-t" @click="handleDetail3(props.row)">元规则4</span>
								</p>
								<p class="rules-s" @click="handleDetail3(props.row)">行为规则2</p>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="序号" prop="id" width="80px">
						<template slot-scope="scope">
							<span v-text="getIndex(scope.$index)"> </span>
						</template>
					</el-table-column>
					<el-table-column label="任务规则" prop="name">
					</el-table-column>
					<el-table-column label="设计" prop="design">
					</el-table-column>
					<el-table-column label="编码" prop="code">
					</el-table-column>
					<el-table-column label="标签" prop="label">
					</el-table-column>
					<el-table-column label="描述" prop="desc">
					</el-table-column>
					<el-table-column label="操作" prop="operate">
						<template slot-scope="scope">
							<el-button style="color: #4671EB;text-decoration: underline" type="text"
								@click="handleDetail(scope.$index, scope.row)">详情</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-table v-else-if="radio == 2" height="75vh" :data="tableData" style="width: 100%" key="table2"
					:header-cell-style="tableHeaderCellStyle">
					<el-table-column type="expand">
						<!-- -->
						<template slot-scope="props">
							<div class="rules rules2">
								<p class="rules-s" @click="handleDetail3(props.row)">元规则2
								</p>
								<p class="rules-s" @click="handleDetail3(props.row)">元规则8</p>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="序号" prop="id" width="80px">
						<template slot-scope="scope">
							<span v-text="getIndex2(scope.$index)"> </span>
						</template>
					</el-table-column>
					<el-table-column label="行为规则名称" prop="name">
					</el-table-column>
					<el-table-column label="设计" prop="design">
					</el-table-column>
					<el-table-column label="编码" prop="code">
					</el-table-column>
					<el-table-column label="标签" prop="label">
					</el-table-column>
					<el-table-column label="描述" prop="desc">
					</el-table-column>
					<el-table-column label="操作" prop="operate">
						<template slot-scope="scope">
							<el-button style="color: #4671EB;text-decoration: underline" type="text"
								@click="handleDetail(scope.$index, scope.row)">详情</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-table v-else-if="radio == 3" height="75vh" :data="tableData" style="width: 100%" key="table3"
					:header-cell-style="tableHeaderCellStyle">
					<el-table-column label="序号" prop="id" width="80px">
						<template slot-scope="scope">
							<span v-text="getIndex3(scope.$index)"> </span>
						</template>
					</el-table-column>
					<el-table-column label="元规则名称" prop="name">
					</el-table-column>
					<el-table-column label="模型类型" prop="type">
					</el-table-column>
					<el-table-column label="设计" prop="design">
					</el-table-column>
					<el-table-column label="编码" prop="code">
					</el-table-column>
					<el-table-column label="标签" prop="label">
					</el-table-column>
					<el-table-column label="描述" prop="desc">
					</el-table-column>
					<el-table-column label="操作" prop="operate">
						<template slot-scope="scope">
							<el-button style="color: #4671EB;text-decoration: underline" type="text"
								@click="handleDetail(scope.$index, scope.row)">详情</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 任务规则分页 -->
				<el-pagination class="pagination" v-if="activeIndex == 1 && radio == 1" @size-change="handleSizeChange"
					@current-change="handleCurrentChange" :current-page="currentPage1" :page-sizes="[5, 10, 15, 20, 25, 30, 35, 40]"
					:page-size="pageSize1" layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
				<!-- 行为规则分页 -->
				<el-pagination class="pagination" v-else-if="activeIndex == 1 && radio == 2" @size-change="handleSizeChange2"
					@current-change="handleCurrentChange2" :current-page="currentPage2"
					:page-sizes="[5, 10, 15, 20, 25, 30, 35, 40]" :page-size="pageSize2"
					layout="total, sizes, prev, pager, next, jumper" :total="total2">
				</el-pagination>
				<!-- 元规则分页 -->
				<el-pagination class="pagination" v-else-if="activeIndex == 1 && radio == 3" @size-change="handleSizeChange3"
					@current-change="handleCurrentChange3" :current-page="currentPage3"
					:page-sizes="[5, 10, 15, 20, 25, 30, 35, 40]" :page-size="pageSize3"
					layout="total, sizes, prev, pager, next, jumper" :total="total3">
				</el-pagination>

			</div>

		</div>
		<!-- 模板板块 -->
		<div class="content moudle" v-else-if="activeIndex == 2">

			<div class="con-top">
				<el-input class="search-input" placeholder="请输入" v-model="inputM" clearable>
				</el-input>
				<el-button class="search" type="primary" icon="el-icon-search" @click="onSubmit(inputM, '4')">查询</el-button>

			</div>
			<div class="table">
				<el-table :data="tableData" height="75vh" style="width: 100%" key="table4"
					:header-cell-style="tableHeaderCellStyle">
					<el-table-column label="序号" prop="id" width="80px">
						<template slot-scope="scope">
							<span v-text="getIndex4(scope.$index)"> </span>
						</template>
					</el-table-column>
					<el-table-column label="模板名称" prop="name">
					</el-table-column>
					<el-table-column label="设计" prop="design">
					</el-table-column>
					<el-table-column label="编码" prop="code">
					</el-table-column>
					<el-table-column label="标签" prop="label">
					</el-table-column>
					<el-table-column label="描述" prop="desc">
					</el-table-column>
					<el-table-column label="操作" prop="operate">
						<template slot-scope="scope">
							<el-button style="color: #4671EB;text-decoration: underline" type="text"
								@click="handleDetail2(scope.$index, scope.row)">详情</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination class="pagination" @size-change="handleSizeChange4" v-if="activeIndex == 2"
					@current-change="handleCurrentChange4" :current-page="currentPage4"
					:page-sizes="[5, 10, 15, 20, 25, 30, 35, 40]" :page-size="pageSize4"
					layout="total, sizes, prev, pager, next, jumper" :total="total4">
				</el-pagination>
			</div>
		</div>
		<!-- 规则详情 -->
		<el-dialog title="详情" :visible.sync="dialogFormVisible" center>
			<el-form :model="form">
				<el-form-item label="任务规则名称:" :label-width="formLabelWidth">
					<el-input v-model="form.name" autocomplete="off" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="相关关联:" :label-width="formLabelWidth">
					<el-input v-model="form.association" autocomplete="off" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="设计:" :label-width="formLabelWidth">
					<el-input v-model="form.design" autocomplete="off" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="编码:" :label-width="formLabelWidth">
					<el-input v-model="form.code" autocomplete="off" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="标签:" :label-width="formLabelWidth">
					<el-input v-model="form.label" autocomplete="off" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="描述:" :label-width="formLabelWidth">
					<el-input type="textarea" v-model="form.desc" :disabled="true"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">返回</el-button>
			</div>
		</el-dialog>
		<!-- 模板详情 -->
		<el-dialog title="详情" :visible.sync="dialogFormVisible2" center>
			<el-form :model="form2">
				<el-form-item label="模板名称:" :label-width="formLabelWidth">
					<el-input v-model="form2.name" autocomplete="off" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="设计:" :label-width="formLabelWidth">
					<el-input v-model="form2.design" autocomplete="off" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="编码:" :label-width="formLabelWidth">
					<el-input v-model="form2.code" autocomplete="off" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="标签:" :label-width="formLabelWidth">
					<el-input v-model="form2.label" autocomplete="off" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="描述:" :label-width="formLabelWidth">
					<el-input type="textarea" v-model="form2.desc" :disabled="true"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible2 = false">返回</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>

export default {
	data () {
		return {
			activeIndex: '1',
			radio: 1,
			input: '',
			inputM: '',
			filterList: [],//下来筛选后的数据
			currentPage1: 1,//当前页码数
			currentPage2: 2,//当前页码数
			currentPage3: 3,//当前页码数
			currentPage3: 4,//当前页码数
			pageSize1: 5,//每页显示条数
			pageSize2: 5,//每页显示条数
			pageSize3: 5,//每页显示条数
			pageSize4: 4,//每页显示条数
			total: 0,
			total2: 0,
			total3: 0,
			total4: 0,
			tableData: [],//最终显示在页面的数据
			dataList: [],//当前应展示的页面数据
			tableData1: [],
			tableData2: [],
			tableData3: [],
			tableData4: [],
			dialogFormVisible: false,//规则详情
			dialogFormVisible2: false,//模板详情
			form: {
				name: '',
				association: '',
				design: '',
				date1: '',
				code: '',
				label: '',
				desc: '',
			},
			form2: {
				name: '',
				design: '',
				code: '',
				label: '',
				desc: ''
			},
			formLabelWidth: '120px'
		}
	},
	components: {},
	watch: {
		pageSize1: {
			handler (val) {
				this.getCurrentPageData(this.dataList, val, this.currentPage1)
			}
		},
		pageSize2: {
			handler (val) {
				this.getCurrentPageData(this.dataList, val, this.currentPage2)
			}
		},
		pageSize3: {
			handler (val) {
				this.getCurrentPageData(this.dataList, val, this.currentPage3)
			}
		},
		pageSize4: {
			handler (val) {
				this.getCurrentPageData(this.dataList, val, this.currentPage4)
			}
		},
		currentPage1: {
			handler (val) {
				this.getCurrentPageData(this.dataList, this.pageSize1, val)
			}
		},
		currentPage2: {
			handler (val) {
				this.getCurrentPageData(this.dataList, this.pageSize2, val)
			}
		},
		currentPage3: {
			handler (val) {
				this.getCurrentPageData(this.dataList, this.pageSize3, val)
			}
		},
		currentPage4: {
			handler (val) {
				this.getCurrentPageData(this.dataList, this.pageSize4, val)
			}
		},
		activeIndex: {
			handler (val) {
				console.log(val, 'val')
				this.currentPage1 = 1
				this.pageSize1 = 5
				this.currentPage2 = 1
				this.pageSize2 = 5
				this.currentPage3 = 1
				this.pageSize3 = 5
				this.currentPage4 = 1
				this.pageSize4 = 5
				if (val == 1) {//规则
					this.axios.get('/tableData1.json').then(response => {
						this.dataList = response.data
						this.tableData = this.dataList
						this.getCurrentPageData(this.dataList, this.pageSize1, this.currentPage1)
					})
				} else {
					this.axios.get('/tableData4.json').then(response => {
						this.dataList = response.data
						this.tableData = this.dataList
						this.getCurrentPageData(this.dataList, this.pageSize4, this.currentPage4)
					})
				}

			}
		},
		radio: {
			handler (val) {
				this.currentPage1 = 1
				this.pageSize1 = 5
				this.currentPage2 = 1
				this.pageSize2 = 5
				this.currentPage3 = 1
				this.pageSize3 = 5
				this.currentPage4 = 1
				this.pageSize4 = 5
				if (val == 1) {//任务规则
					this.axios.get('/tableData1.json').then(response => {
						this.dataList = response.data
						this.tableData = this.dataList
						this.getCurrentPageData(this.dataList, this.pageSize1, this.currentPage1)
					})
				} else if (val == 2) {//行为规则
					this.axios.get('/tableData2.json').then(response => {
						this.dataList = response.data
						this.tableData = this.dataList
						this.getCurrentPageData(this.dataList, this.pageSize2, this.currentPage2)
					})
				} else if (val == 3) {//元规则
					this.axios.get('/tableData3.json').then(response => {
						this.dataList = response.data
						this.tableData = this.dataList
						this.getCurrentPageData(this.dataList, this.pageSize3, this.currentPage3)
					})
				}

			}
		},
	},
	mounted () {
		this.axios.get('/tableData1.json').then(response => {
			this.dataList = response.data
			this.tableData = this.dataList
			this.getCurrentPageData(this.dataList, this.pageSize1, this.currentPage1)
		})

	},
	methods: {
		tableHeaderCellStyle () {
			return { backgroundColor: '#FAFAFA' }
		},
		// 获取当前页的数据
		getCurrentPageData (dataList, pageSize, curPage) {
			let start = ''
			let end = ''
			this.filterList = dataList
			start = (curPage - 1) * pageSize
			end = start + pageSize
			if (this.activeIndex == 2) {
				this.total4 = this.filterList.length
			} else {
				this.total = this.filterList.length
			}
			if (this.radio == 1) {
				this.total = this.filterList.length
			} else if (this.radio == 2) {
				this.total2 = this.filterList.length
			} else if (this.radio == 3) {
				this.total3 = this.filterList.length
			}
			this.tableData = dataList.slice(start, end)
			return dataList.slice(start, end)

		},
		// 点击检索
		onSubmit (inputVal, type) {
			let pageSize = 5
			let currentPage = 1
			// 检索时  把分页置空
			// 这里我是要根据类型，名字，所属实现模糊查询，需要什么就在filter里的if中加
			// 这里要用 toLowerCase()  把你输入的全部换成小写，可以更好的模糊查询
			let newList = []
			let _search = inputVal.toLowerCase()
			if (_search) {
				this.filterList.filter((item) => {
					if (
						item.name.toLowerCase().indexOf(_search) !== -1 ||
						item.code.toLowerCase().indexOf(_search) !== -1
					) {
						newList.push(item)
					}
				})
				this.getCurrentPageData(newList, pageSize, currentPage)
			} else {
				this.getCurrentPageData(this.dataList, pageSize, currentPage)
			}

		},
		// 处理分页序号
		getIndex ($index) {
			return (this.currentPage1 - 1) * this.pageSize1 + $index + 1
		},
		getIndex2 ($index) {
			return (this.currentPage2 - 1) * this.pageSize2 + $index + 1
		},
		getIndex3 ($index) {
			return (this.currentPage3 - 1) * this.pageSize3 + $index + 1
		},
		getIndex4 ($index) {
			return (this.currentPage4 - 1) * this.pageSize4 + $index + 1
		},
		handleSelect (key, keyPath) {
			this.activeIndex = key
			this.radio = 1
			this.currentPage1 = 1

		},
		handleDetail (index, row) {
			this.dialogFormVisible = true
			this.form = row
		},
		handleDetail2 (index, row) {
			this.dialogFormVisible2 = true
			this.form2 = row
		},
		handleDetail3 (row) {
			this.dialogFormVisible = true
			this.form = row
		},
		handleSizeChange (val) {
			console.log(`每页 ${val} 条`)
			this.pageSize1 = val
			this.currentPage1 = 1
		},
		handleCurrentChange (val) {
			console.log(`当前页: ${val}`)
			this.currentPage1 = val
		},
		handleSizeChange2 (val) {
			console.log(`每页 ${val} 条`)
			this.pageSize2 = val
			this.currentPage2 = 1
		},
		handleCurrentChange2 (val) {
			console.log(`当前页: ${val}`)
			this.currentPage2 = val
		},
		handleSizeChange3 (val) {
			console.log(`每页 ${val} 条`)
			this.pageSize3 = val
			this.currentPage3 = 1
		},
		handleCurrentChange3 (val) {
			console.log(`当前页: ${val}`)
			this.currentPage3 = val
		},
		handleSizeChange4 (val) {
			console.log(`每页 ${val} 条`)
			this.pageSize4 = val
			this.currentPage4 = 1
		},
		handleCurrentChange4 (val) {
			console.log(`当前页: ${val}`)
			this.currentPage4 = val
		},
	},
}
</script>

<style lang="less" scoped>
.home {
	width: 100%;

	.content {
		.con-top {}


	}
}
</style>

<style>
.rulePage .el-menu--horizontal>.el-menu-item {
	font-size: 20px;
}

.rulePage .el-menu--horizontal>.el-menu-item.is-active {
	color: #05ACB5;
	border-bottom: 2px solid #05ACB5;
}

.rulePage .content {
	background: #fff;
	margin-top: 20px;
}

.rulePage .con-top {
	padding: 20px 0 0 20px;
}

.rulePage .table {
	text-align: right;
	padding: 20px 0;
	margin: 0 20px;
}

.rulePage .pagination {
	width: 95%;
	margin: 20px auto;
}

.rulePage .el-radio .el-radio__input .el-radio__inner {
	border-radius: 2px;
	background: #fff;
	border-color: #020202;
}

.rulePage .el-radio__input.is-checked .el-radio__inner {
	border-color: #06DB6B;
}

.rulePage .el-radio__input.is-checked .el-radio__inner::after {
	content: '';
	width: 8px;
	height: 3px;
	border: 2px solid #06DB6B;
	border-top: transparent;
	border-right: transparent;
	text-align: center;
	display: block;
	position: absolute;
	top: 2px;
	left: 1px;
	vertical-align: middle;
	transform: rotate(-45deg);
	border-radius: 0px;
	background: none;
}

.rulePage .el-radio__input.is-checked+.el-radio__label {
	color: #1C2536
}

.rulePage .el-radio-group {
	margin-right: 20px;
}

.rulePage .search-input {
	width: 400px;
	margin: 0 10px 0 0;
	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
	border-radius: 6px;
}

.rulePage .search {
	width: 120px;
	background: #4271C4
}

.rulePage .demo-table-expand {
	font-size: 0;
}

.rulePage .demo-table-expand label {
	width: 90px;
	color: #99a9bf;
}

.rulePage .demo-table-expand .el-form-item {
	margin-right: 0;
	margin-bottom: 0;
	width: 50%;
}

.rulePage .rules {
	border-left: 1px dashed #4171C4;
	color: #4171C4;
	font-size: 18px;
}



.rulePage .el-table {
	font-size: 18px;
}


.rulePage .rules {
	margin-left: 150px;
	background: #fafafa;
}

.rulePage .rules .rules-s {
	cursor: pointer;
}

.rulePage .rules .rules-s::before {
	content: '';
	width: 20px;
	display: inline-block;
	border-bottom: 1px dashed #4171C4;
	margin-bottom: 5px;
}

.rulePage .rules .rules-s .rules-t {
	display: inherit;
	cursor: pointer;
}

.rulePage .rules .rules-s .rules-t::before {
	content: '';
	width: 20px;
	height: 13px;
	margin-left: 35px;
	display: inline-block;
	border-left: 1px dashed #4171C4;
	border-bottom: 1px dashed #4171C4;
	margin-bottom: 5px;
}

.rulePage .rules2 .rules-s {
	padding: 10px 0;
}

.el-dialog .el-form {
	width: 500px;
	margin: 0 auto
}

.el-dialog .el-dialog__header {
	border: 1px solid #707070;
}

.el-dialog .el-dialog__header .el-dialog__title {
	font-size: 20px;
	color: rgba(0, 0, 0, 0.59)
}

.el-dialog .el-dialog__footer .el-button {
	width: 160px;
	height: 40px;
	background: #4271C4;
	color: #fff;
}

.el-dialog .el-form .el-form-item .el-form-item__label {
	font-size: 16px;
	color: #000;
}

.el-dialog .el-form .el-form-item .el-input .el-input__inner {
	border: 1px solid #808495
}

.el-dialog .el-form .el-form-item .el-textarea .el-textarea__inner {
	border: 1px solid #808495
}
</style>